<template>
    <div class="up-box">
        <a-upload-dragger
            v-model:fileList="fileList"
            name="file"
            :multiple="true"
            action="/easyExcelHandler/simpleUpload"
            @change="handleChange"
            @drop="handleDrop"
            accept=".xlsx"
        >
            <p class="ant-upload-drag-icon">
                <inbox-outlined></inbox-outlined>
            </p>
            <p class="ant-upload-text">Click or drag file to this area to upload</p>
            <p class="ant-upload-hint">
                Support for a single or bulk upload. Strictly prohibit from uploading company data or other
                band files
            </p>
        </a-upload-dragger>
    </div>
</template>
<script>
import { InboxOutlined } from '@ant-design/icons-vue'
import { message } from 'ant-design-vue'
import { $http } from '@/utils/axios'
import { useRouter } from 'vue-router'
import { reactive,toRefs, ref, defineComponent,onMounted, computed} from 'vue'
export default defineComponent({
components: {
InboxOutlined,
},

setup() {
    const handleChange = (info) => {
        const status = info.file.status

        if (status !== 'uploading') {
            console.log(info.file, info.fileList)
        }

        if (status === 'done') {
            console.log(`${info.file.name} file uploaded successfully.`)

            //* * * * info.file.originFileObj为上传文件binary格式
            const formData = new FormData()
            formData.append('file', info.fileList[0].originFileObj)

            $http.post('/easyExcelHandler/simpleUpload', formData).then((res) => {
                if (res.data.code === '0000') {
                    console.log(`${info.file.name} file uploaded successfully.`)
                } else {
                    console.log(`${info.file.name} file upload failed.`)
                }
            })
        } else if (status === 'error') {
            console.log(`${info.file.name} file upload failed.`)
        }
    }
    return {
        handleChange,
        fileList: ref([]),
        handleDrop: (e) => {
            console.log(e)
        },
    }
}
})
</script>
<style scoped>
.up-box{
    height: 500px;
}
</style>